<template>
	<view class="container">
		<view class="header">
			<text class="title">购物车</text>
		</view>

		<view class="cart-list">
			<view v-if="cartItems.length > 0">
				<view v-for="(item, index) in cartItems" :key="index" class="cart-item">
					<view class="item-left">
						<checkbox :checked="item.checked" @click="toggleCheck(index)" />
						<image class="item-image" :src="item.medicinesImg" mode="aspectFill" />
					</view>
					<view class="item-right" style="padding: 10px 0;">
						<text class="item-name" style="font-size: 18px; color: #333; display: block; margin-bottom: 12px;">
              <text v-if="item.isOtc == 0" class="otc-type">OTC</text>
              <text v-if="item.isOtc == 1" class="prescription-type">处方药</text>
              {{ item.medicinesName }}</text>
						<view class="item-spec-container" style="margin: 12px 0;">
							<text
								class="item-spec" style="font-size: 14px; color: #666;">{{ item.unit == "袋"?"10"+item.unit+"/盒":"10"+item.unit+"/条" }}</text>
						</view>
						<view class="item-bottom" style="margin-top: 10px; align-items: center;">
							<text class="item-price" style="font-size: 18px; color: #f44; font-weight: bold;">¥{{ item.prescriptionPrice }}</text>
							<uni-number-box :value="item.itemNum" @change="(val) => changeQuantity(index, val)" :min="1"
								:max="99" />
						</view>
					</view>
				</view>
			</view>
			<view v-else class="empty-cart">
				<image src="/static/空空如也.png" class="empty-icon" />
				<text class="empty-text">空空如也</text>
			</view>
		</view>

		<view class="footer-bar">
			<view class="footer-left">
				<checkbox :checked="allChecked" @click="toggleAllCheck" />
				<text>全选</text>

			</view>
			<text class="total-text">合计: ¥{{ totalPrice }}</text>
			<button class="checkout-btn" @click="checkout">结算({{ checkedCount }})</button>
		</view>
	</view>
</template>

<script>
	import {
		postCreatedCashPayment
	} from '@/api/orderCharge/index.js'
	export default {
		data() {
			return {
				cartItems: [],
				orderChargeFormDTO: {
					orderCharge: {
						orderAmount: 0,
						patientName: '',
					},
					orderChargeItems: [],
				},
			}
		},
		computed: {
			totalPrice() {
				return this.cartItems
					.filter(item => item.checked)
					.reduce((total, item) => total + item.prescriptionPrice * item.itemNum, 0)
			},
			allChecked() {
				return this.cartItems.every(item => item.checked)
			},
			checkedCount() {
				return this.cartItems.filter(item => item.checked).length
			}
		},
		methods: {
			toggleCheck(index) {
				this.cartItems[index].checked = !this.cartItems[index].checked
			},
			toggleAllCheck() {
				const checked = !this.allChecked
				this.cartItems.forEach(item => {
					item.checked = checked
				})
			},
			changeQuantity(index, val) {
				this.cartItems[index].itemNum = val
			},
			checkout() {
				const selectedItems = this.cartItems.filter(item => item.checked)
				if (selectedItems.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return
				}
				//将选中的商品存入订单表
				this.orderChargeFormDTO.orderCharge.orderAmount = this.totalPrice
				this.orderChargeFormDTO.orderCharge.patientName = uni.getStorageSync('patient').name
				this.orderChargeFormDTO.orderChargeItems = selectedItems.map(item => ({
					itemName: item.medicinesName,
					itemPrice: item.prescriptionPrice,
					itemNum: item.itemNum,
					itemType: 0,
					itemAmount: item.prescriptionPrice * item.itemNum
				}))
				uni.showModal({
					title: '确认结算',
					content: `您将结算 ¥${this.totalPrice}`,
					success: (res) => {
						if (res.confirm) {
							postCreatedCashPayment(this.orderChargeFormDTO).then(res => {
								if (res.data != null) {
									uni.showToast({
										title: '购买成功',
										icon: 'success'
									})
									//根据被选中的商品删除存储的购物车中的商品
									let cartItems = uni.getStorageSync('cart') || []
									// //移除cartItems中与selectedItems匹配的元素
									cartItems = cartItems.filter(item => !selectedItems.some(
										selected => selected.medicinesId === item.medicinesId))
									uni.setStorageSync('cart', cartItems)
									//刷新
									this.getCartItems()
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消结算',
								icon: 'none'
							})
						}
					}
				})
			},
			//获取购物车数据
			getCartItems() {
				// 从本地存储中获取购物车数据
				const cartItems = uni.getStorageSync('cart')
				if (cartItems) {
					this.cartItems = cartItems
				} else {
					this.cartItems = []
				}
			},
		},
		onLoad() {
			// 获取购物车数据
			this.getCartItems()
		}
	}
</script>

<style scoped>
	.container {
		padding: 0;
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 100px;
	}

	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
	}

	.empty-icon {
		width: 100px;
		height: 100px;
		margin-bottom: 20px;
	}

	.empty-text {
		font-size: 16px;
		color: #999;
	}

	.header {
		height: 50px;
		line-height: 50px;
		text-align: center;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.cart-list {
		margin-top: 10px;
	}

  .otc-type {
    background: #00BFFF;
    border-radius: 4px;
    color: white;
    padding: 1px 3px;
    font-size: 10px;
    margin-right: 5px;
  }

  .prescription-type {
    background: #FF69B4;
    border-radius: 4px;
    color: white;
    padding: 1px 3px;
    font-size: 10px;
    margin-right: 5px;
  }

	.cart-item {
		display: flex;
		padding: 15px;
		background-color: #fff;
		margin-bottom: 10px;
		align-items: center;
		border-radius: 8px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	}

	.item-left {
		display: flex;
		align-items: center;
		margin-right: 15px;
		gap: 10px;
	}

	.item-image {
		width: 80px;
		height: 80px;
		border-radius: 4px;
	}

	.item-right {
		flex: 1;
	}

	.item-name {
		font-size: 16px;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.item-spec-container {
		margin: 8px 0;
	}

	.item-spec {
		font-size: 12px;
		color: #999;
		display: block;
	}

	.item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5px;
	}

	.item-price {
		color: #f44;
		font-size: 16px;
		font-weight: bold;
	}

	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
		z-index: 100;
	}

	.footer-left {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.total-text {
		margin-left: 82px;
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.checkout-btn {
		background-color: #f44;
		color: #fff;
		border-radius: 10px;
		padding: 0 25px;
		height: 40px;
		line-height: 40px;
		font-weight: 500;
		box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
	}
</style>